import { memo, ReactNode } from "react";
import { DotLoading } from "antd-mobile";
import Header from "../header";
import DataDisplayContentStyle from "./style";
import { useNavigate } from "react-router-dom";

const DataDisplay_content = memo(
  (props: {
    children: ReactNode;
    loading: boolean;
    title: string;
    returnClick?: (arg?: any) => void;
    showReturnBtn?: boolean;
    slot_right?: ReactNode;
  }) => {
    const nav = useNavigate();
    const {
      children,
      loading,
      title,
      returnClick,
      showReturnBtn = true,
      slot_right,
    } = props;
    const headerReturnClick = () => {
      if (returnClick) {
        returnClick();
        return;
      }
      nav(-1);
    };
    return (
      <DataDisplayContentStyle>
        <Header
          size={"small"}
          showReturnBtn={showReturnBtn}
          title={loading ? "加载中~" : title}
          returnClick={headerReturnClick}
          slot_right={slot_right}
        />
        <div className="content">
          {loading ? <DotLoading color="primary" /> : children}
        </div>
      </DataDisplayContentStyle>
    );
  }
);

export default DataDisplay_content;
